                                                                                         <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/cart.css">
</head>
<body>
  <h1 style="font-size: 30px; text-align: center;">购物车</h1>

  <div class="container"></div>
              
  <script src="../js/jquery.min.js"></script>

  <script>
    // 调用函数 生成 初始页面内容
    setPage();

    // 点击 点击事件 页面是动态生成 使用 事件委托语法
    $(".container").click(function(e){
      // 获取 localStorage 中 cart 数据
      let cart = JSON.parse( localStorage.cart );

      // 点击标签 name 是 all 点击的是 全选标签
      if(e.target.getAttribute('name') === 'all'){
        // 给 cart 数值中 所有数据 buy属性的属性值 
        // 设置为 全选标签 checked 属性值
        cart.forEach(item=>{
          item.buy = e.target.checked;
        })

      // 点击标签 name 是 goods 点击的是 全选标签
      // 改变 点击标签 对应的 一个商品 buy 的值 是 true / false
      }else if(e.target.getAttribute('name') === 'goods'){

        // 数组中 对应的单元 buy 属性 修改为 点击标签的 checked属性值
        // 索引下标 是 标签 index属性值
        // 只是单纯的操作本地的数组 使用 索引下标也行
        cart[e.target.getAttribute('index')].buy = e.target.checked;

      // 点击标签 name 是 del 点击的是 我不要了 按钮
      // 找到 数组中对应的 数据单元 执行删除操作
      }else if(e.target.getAttribute('name') === 'del'){
        // 数组中 找到 对应的索引下标 开始 删除一个单元
        cart.splice( e.target.getAttribute('index') , 1 );

      // 点击标签 name 是 - 点击的是 减 按钮
      // 找到 数组中对应的 数据单元 num 属性值 -1
      }else if(e.target.getAttribute('name') === '-'){
        // 数组中 找到 对应单元 num 存储的数值 -1
        cart[ e.target.getAttribute('index') ].num = cart[ e.target.getAttribute('index') ].num-0-1 ;  
      
      // 点击标签 name 是 + 点击的是 加 按钮
      // 找到 数组中对应的 数据单元 num 属性值 +1
      }else if(e.target.getAttribute('name') === '+'){
        // 数组中 找到 对应单元 num 存储的数值 +1
        cart[ e.target.getAttribute('index') ].num = cart[ e.target.getAttribute('index') ].num-0+1 ;
      }


      console.log( cart );

      // 将 新数组的数据 写入给 localStorage 
      localStorage.cart = JSON.stringify(cart);
      // 根据 新的 localStorage 数据 再次动态渲染生成页面
      setPage();
    })

    // 封装一个函数 根据 localStorage  中的数据信息 动态生成页面
    function setPage(){
      // 获取 localStorage 中 cart 的数据信息
      let cart = localStorage.cart;
      // console.log( cart );

      if(cart === undefined){
        // 表示 购物车 数据信息 还没有 创建 
        $('.container').html('<h1>您还没有购物记录，请您先去购物</h1>');

      }else{
        // 有 购物车 数据信息 需要将 json字符串 先转化为 对应的数据类型
        cart = JSON.parse(cart);

        if (cart.length === 0){
          // 表示 购物车 创建了 但是 其中的商品个数是0
          $('.container').html('<h1>您的购物车是空车，请您添加商品</h1>');
        } else {
          // 有车 有商品 动态渲染生成页面
          
          // 定义变量
          let bool = true;
          let type = 0;
          let number = 0;
          let pay = 0;
          
          // 第一部分是: div --- ul的起始标签部分
          let str = `
          <div class="panel panel-info ">
            <div class="panel-body bg-info">
              <div class="checkbox">
                <label>
                  <input name="all" type="checkbox" value="">
                  全选
                </label>
              </div>
            </div>
            <div class="panel-footer">
              <ul class="cart-list">
          `;

          // 第二部分是: 根据数组 动态渲染生成 li标签
          cart.forEach( (item,key) => {
            // 如果 有 一个商品 购买状态是 false
            // 全选标签 状态也是 false不选中
            if( item.buy === false ){
              bool = false;
            }else{
              // 计算 购买种类,个数,金额
              type++;

              number += item.num-0;

              pay += (item.num-0) * (item.goods_price-0);
            }

            str += `
              <li class="cart-item">
                <div class="left">
                  <input name="goods" index="${key}"  goods_id="${item.goods_id}" type="checkbox" ${item.buy ? 'checked' : ''}>
                </div>
                <div class="right">
                  <div class="media">
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object" src="${item.goods_small_logo}" alt="...">
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">${item.goods_name}</h4>
                      <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                      </p>
                      <div class="btn-group pull-right" role="group" aria-label="...">
                        <button name="-" index="${key}" type="button" class="btn btn-default" ${ item.num === 1 ? 'disabled' : "" }>-</button>
                        <button type="button" class="btn btn-default" disabled>${item.num}</button>
                        <button name="+" index="${key}" type="button" class="btn btn-default" ${ item.num === item.goods_number-0 ? 'disabled' : "" }>+</button>
                      </div>
                      <button name="del" index="${key}" goods_id="${item.goods_id}" class="del btn btn-danger">我不要了</button>

                    </div>
                  </div>
                </div>
              </li>
            `;
          });
          

          // 第三部分是: ul的结束标签 --- div
          str += `
              </ul>
              </div>

            <div>
              <h1>您共计购买 ${type} 种商品</h1>
              <h1>您共计购买 ${number} 件商品</h1>
              <h1>您共计支付 ${pay.toFixed(2)} 元金额</h1>
            </div>
          </div>
          `;

          // 将str 写入div标签
          $('.container').html(str);

          // 设定 全选标签 状态
          $('[name="all"]').prop('checked' , bool);
        }
      }
    }
  </script>
</body>
</html>
